<template>
  <div class="app-container">
    <h3>课程类别管理</h3>
    <el-button type="primary" @click="addCourseType">新增</el-button><br>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="margin-top:20px;"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column :show-overflow-tooltip="true" label="课程类别名称">
        <template slot-scope="scope">
          {{ scope.row.categoryName }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">启用</span>
          <span v-if="scope.row.status === 0">停用</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="290">
        <template slot-scope="scope">
          <el-button
            :type="scope.row.status == 1 ? 'danger' : 'success'"
            size="mini"
            @click="changeType(scope.row.id, scope.row.status)">{{ scope.row.status == 1 ? "停用" : "启用" }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <el-dialog
      :visible.sync="dialogVisible"
      :title="`新增课程类别`"
      width="50%">
      <span>
        <el-input v-model="categoryName" maxlength="20" placeholder="请输入课程类别，限制20个字符" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourseBack()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCategoryList, editCours, courseUpdateStatus, addCours, editStatus } from '@/api/course'
// import { getTeacherList } from '@/api/teacher'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import mixin from '@/mixin'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'

export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
    // typeFilter(status) {
    //   const statusMap = {
    //     0: '未上架',
    //     1: '已上架',
    //     2: '已结束'
    //   }
    //   return statusMap[status]
    // }
  },
  mixins: [mixin],
  data() {
    return {
      dialogVisible: false,
      categoryName: '',
      // -----------------
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.fetchData()
  },
  mounted() {
    // console.log('查看权限名称mounted', this.permissionList)
  },
  methods: {
    changeType(id, status) {
      const strAsk = status === 1 ? '是否停用？' : '是否启用？'
      const str = status === 1 ? '已停用' : '已启用'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        status: 'warning'
      }).then(res => {
        status === 0 ? status = 1 : status = 0
        const data = { status, id }
        editStatus(data).then(res => {
          if (res.code === '200') {
            Message.success(str)
            this.fetchData()
          } else {
            Message.error(res.message + res.data)
          }
        })
      })
    },
    addCourseType() {
      this.dialogVisible = true
    },
    addCourseBack() {
      if (this.categoryName === '') {
        Message.error('请填写课程类别')
        return
      }
      this.listLoading = true;
      addCours({ categoryName: this.categoryName }).then(res => {
        if (res.code === '200') {
          this.fetchData()
          this.dialogVisible = false
          setTimeout(() => {
            this.listLoading = false;
          }, 500)
        }
      })
    },
    fetchData() {
      const newData = this.objectCon(this.listQuery, this.search)
      console.log('newData:', newData)
      this.listLoading = true
      getCategoryList(newData).then(response => {
        console.log(response.data.list)
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 500)
      })
    }
  }
}
</script>

<style>
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
</style>
